<template>
  <view class="success-container">
    <!-- 成功图标 -->
    <view class="success-icon">
      <text class="checkmark">✓</text>
    </view>

    <!-- 成功文本 -->
    <view class="success-text">下单成功</view>

    <!-- 订单金额 -->
    <view class="order-amount">¥{{ amount }}</view>

    <!-- 查看订单按钮 -->
    <button class="view-order-btn" @tap="viewOrder">查看订单</button>

    <!-- 回到首页按钮 -->
    <button class="back-home-btn" @tap="backToHome">回到首页</button>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";

// 订单金额
const amount = ref("0.00");

// 查看订单方法
const viewOrder = () => {
  switch (typeForm.value) {
    case "proxy":
      uni.redirectTo({
        url: `/pages/order/supplierOrderInfo?id=${orderId.value}`,
      });
    case "supplier":
      uni.redirectTo({
        url: `/pagesShop/order/orderInfo?id=${orderId.value}`,
      });
    case "store":
      uni.redirectTo({
        url: `/pagesShop/order/orderUserInfo?id=${orderId.value}`,
      });
      return;
  }
};

// 回到首页方法
const backToHome = () => {
  typeForm.value === "proxy"
    ? uni.redirectTo({
        url: "/pages/supplier/supplier",
      })
    : uni.redirectTo({
        url: "/pagesShop/store/storeHome",
      });
};
const typeForm = ref("");
const orderId = ref("");
const shop = ref({});
onLoad((options) => {
  // 页面加载时的逻辑
  amount.value = options.totalPrice;
  typeForm.value = options.type;
  orderId.value = options.id;
});
</script>

<style lang="scss" scoped>
.success-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 30rpx;
  min-height: 100vh;
  background-color: #fff;
}

.success-icon {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background-color: #4cd964;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30rpx;

  .checkmark {
    color: #fff;
    font-size: 80rpx;
    line-height: 80rpx;
    font-weight: bold;
  }
}

.success-text {
  font-size: 34rpx;
  color: #333;
  margin-bottom: 30rpx;
}

.order-amount {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 80rpx;
}

.view-order-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #0099ff;
  color: #fff;
  border-radius: 8rpx;
  font-size: 32rpx;
  margin-bottom: 30rpx;
  border: none;
}

.back-home-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #fff;
  color: #333;
  border-radius: 8rpx;
  font-size: 32rpx;
  border: 1px solid #ddd;
}
</style>
